<template>
  <div class="top-nav-filter flex gap-1">
    <!-- 时间选择 -->
    <div v-show="currentTabValue !== 1 || tableType !== ''">
      <a-radio-group v-model="activeIndex" :options="radioOptions" @change="onChange" />
      <i-range-picker
        style="width: 236px; margin-left: -12px"
        v-model="dateValue"
        :disabled-date="disabledDate"
        :allow-clear="false"
        v-model:popup-visible="popupVisible"
        @popup-visible-change="handlePopupVisibleChange"
      />
    </div>
    <!-- 时间统计范围 -->
    <div v-show="![1, 3].includes(currentTabValue) || tableType !== ''">
      <a-select
        style="width: 180px"
        @change="changeItemNameList"
        v-model="queryParams.orderTimeQueryType"
        :options="revenueSummary.orderQueryTypeEnums"
      />
    </div>
    <!--
      0 全部
      1 总资产
      2 总收入
      3 总支出
    -->
    <!-- 门店数据多选 -->
    <remote-select
      v-if="currentTabValue != 3"
      v-model="queryParams.siteIdList"
      :max-tag-count="1"
      type="multiple_site_listBystaff"
      style="width: 220px"
      placeholder="全部门店"
      :params="{ idList: queryParams.siteIdList }"
      @visible-change="changeSiteIdFn"
    >
      <template #label="{ data }"> {{ ellipsis(data.label) }} </template>
    </remote-select>
    <!-- 机构数据多选 -->
    <remote-select
      v-else
      v-model="queryParams.orgIdList"
      :max-tag-count="1"
      type="org_add_listByStaff_multiple"
      style="width: 220px"
      placeholder="全部门店"
      :params="{ oldIdList: queryParams.orgIdList }"
      @visible-change="changeOrgIdFn"
    >
      <template #label="{ data }"> {{ ellipsis(data.label) }} </template>
    </remote-select>
    <slot></slot>
  </div>
</template>
<script setup>
  import { reactive, ref, onMounted } from 'vue'
  import dayjs from 'dayjs'
  // 获取dict数据
  import { usePageDict } from '@/hooks/useDict'
  defineProps({
    tableType: {
      type: String,
      default: '', // 车系carSeries、车型carModel
    },
  })
  const emits = defineEmits(['change'])
  // 超过7个字显示点点点
  const ellipsis = (label) => {
    return label.length > 7 ? `${label.slice(0, 7)}...` : label
  }
  const queryParams = reactive({
    startTime: dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
    endTime: dayjs().format('YYYY-MM-DD'),
    orderTimeQueryType: 4, // 预计或实际还车时间
    //  1:近7天  2:近一个月  3:日期选择
    selectDateType: 1,
  })
  const revenueSummary = usePageDict('revenueSummary')

  const activeIndex = ref(0)
  // 时间选择器
  const radioOptions = ref([
    { label: '近7天', value: 0 },
    { label: '近一个月', value: 1 },
    { label: '时间筛选', value: 2 },
  ])
  const dateValue = ref([])
  const popupVisible = ref(false)
  const onChange = (val) => {
    if (val == 2) {
      popupVisible.value = true
    } else {
      // 清空时间选择器
      dateValue.value = []
      if (val == 0) {
        queryParams.startTime = dayjs().subtract(6, 'day').format('YYYY-MM-DD')
        queryParams.endTime = dayjs().format('YYYY-MM-DD')
        queryParams.selectDateType = 1
      }
      if (val == 1) {
        queryParams.startTime = dayjs().subtract(29, 'day').format('YYYY-MM-DD')
        queryParams.endTime = dayjs().format('YYYY-MM-DD')
        queryParams.selectDateType = 2
      }
      emits('change', queryParams)
    }
  }
  const handlePopupVisibleChange = (visible) => {
    // 关闭日期选择插件
    if (visible == false) {
      let selectDate = dateValue.value
      queryParams.selectDateType = 3
      if (!selectDate || selectDate.length == 0) {
        selectDate = dateValue.value = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
      }
      queryParams.startTime = selectDate[0]
      queryParams.endTime = selectDate[1]
      emits('change', queryParams)
    } else {
      activeIndex.value = 2
    }
  }
  const min = dayjs('2024-01-01 00:00:00')
  const max = dayjs().add(180, 'day')
  const disabledDate = (current) => {
    const stamp = dayjs(current).valueOf()
    if (stamp < min.valueOf() || stamp > max.valueOf()) {
      return true
    }
    return false
  }
  // 更换门店
  const changeSiteIdFn = (value, options) => {
    // 记录 siteOrgIdList start
    const orgIdList = []
    if (value.length) {
      const selectOptions = options.filter((option) => {
        return value.some((item) => item == option.id)
      })
      const selectOrgIdList = selectOptions.map((item) => String(item.orgId))
      orgIdList.push(...selectOrgIdList)
    }
    // 记录到orgId 给expend使用
    queryParams.siteOrgIdList = orgIdList
    emits('change', queryParams)
  }
  // 更换机构
  const changeOrgIdFn = (value, options) => {
    // 记录 siteIdList start
    const siteIdList = []
    if (value.length) {
      // 过滤选择的机构中的门店
      const selectOptions = options.filter((option) => {
        return value.some((item) => item == option.orgId) && option.siteId && option.orgType == 3
      })
      const selectSiteIdList = selectOptions.map((item) => String(item.siteId))
      siteIdList.push(...selectSiteIdList)
    }
    queryParams.orgSiteIdList = siteIdList
    emits('change', queryParams)
  }

  // 外部tab切换并新页面
  /**
   * 0 全部
   * 1 总资产
   * 2 总收入
   * 3 总支出
   */
  const currentTabValue = ref(0)
  const tabChangeFn = (val) => {
    // 如果当前是总支出，则对应行为是切换到其他tab，清空已选门店
    if (currentTabValue.value == 3) {
      queryParams.siteIdList = []
      queryParams.orgSiteIdList = []
      queryParams.siteOrgIdList = []
    }
    // 如果目标是总支出，则对应行为是其他tab切换到总支出，设置 orgIdList 默认值
    if (val == 3) {
      if (queryParams.siteOrgIdList && queryParams.siteOrgIdList.length > 0) {
        queryParams.orgIdList = [...queryParams.siteOrgIdList]
        queryParams.orgSiteIdList = [...queryParams.siteIdList]
      } else {
        queryParams.orgIdList = []
      }
    }
    currentTabValue.value = Number(val)
    emits('change', queryParams)
  }
  const changeItemNameList = () => {
    emits('change', queryParams)
  }

  onMounted(() => {
    // 第三个参数代表是否是初次加载
    emits('change', queryParams, true)
  })

  defineExpose({
    tabChangeFn,
  })
</script>
<style lang="less" scoped>
  .top-nav-filter {
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    > div {
      flex-shrink: 0;
    }
  }
</style>
